
<html lang="en" xmlns:th="http://www.thymeleaf.org/">
<style>
    body::-webkit-scrollbar {
        display: none;
    }
</style>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <div th:replace="header::common_resource"></div>
</head>
<body>
<style>
    .left-container::-webkit-scrollbar {
        display: none;
    }
</style>
<div class="left-container" style="float:left;width: 8%;height: 90%;display: flex;border-radius: 0px;overflow-x: scroll;overflow-y: scroll;">
    <div class="layui-panel" style="flex-shrink: 0;width: 100%">
        <ul class="layui-menu" id="topCategoryMenu">

        </ul>
    </div>
</div>
<div class="left-container" style="float:left;left: 8%; width: 8%;height: 90%;display: flex;border-radius: 0px;overflow-x: scroll;overflow-y: scroll;">
    <div class="layui-panel" style="flex-shrink: 0;width: 100%">
        <ul class="layui-menu" id="secCategoryMenu">
            <li lay-options="{categoryName:'',categoryId:''}" style="text-align:center;font-size: small">
                全部分类
            </li>
        </ul>
    </div>
</div>

<div class="right-container" style="float: right;width: 84%">
    <div class="demoTable layui-form layui-row" style="margin-top: 7px">
        名字：
        <div class="layui-inline">
            <input class="layui-input" name="name" id="nameId" autocomplete="off">
        </div>
        所属专区id：
        <div class="layui-inline">
            <select name="zone" id="zone_id">
                <option value="">全部状态</option>
                <option value="0">0(无)</option>
                <option value="1">1(热卖专区)</option>
                <option value="2">2(满减专区)</option>
                <option value="3">3(折扣专区)</option>
            </select>
        </div>
        <button class="layui-btn" data-type="reload">搜索</button>
    </div>
    <table class="layui-hide" id="test" lay-filter="test"></table>
</div>


<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="deleteAll">批量删除</button>
        <button class="layui-btn layui-btn-sm" lay-event="add">添加</button>
    </div>
</script>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<script type="text/html" id="statusTemplet">
    <!-- 这里的 checked 的状态只是演示 -->
    <input type="checkbox" name="status" value="{{d.id}}" lay-skin="switch" lay-text="激活|禁用" lay-filter="statusLayFilter" {{ d.status == 1 ? 'checked' : '' }}>
</script>

<script type="text/html" id="imageTemplet">
    <img src="{{d.mainImage}}"/>
</script>
<script type="text/html" id="zoneTemplet">
    {{#     if(d.zone==1) {            }}
    热卖专区
    {{#     } else if(d.zone==2){     }}
    满减专区
    {{#     }else if(d.zone==3){         }}
    折扣专区
    {{#     }else if(d.zone==0){         }}
    无
    {{#     }                  }}
</script>


<script th:inline="javascript">
    var table;
    layui.use('table', function(){
        table = layui.table;
        var form = layui.form;

        table.render({
            elem: '#test'
            ,url:[[${#request.getContextPath()}]]+'/product/selectByPage'
            ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
            ,defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
                title: '提示'
                ,layEvent: 'LAYTABLE_TIPS'
                ,icon: 'layui-icon-tips'
            }]
            ,title: '用户数据表'
            ,cols: [
                [
                    {type: 'checkbox', fixed: 'left'}
                    ,{field:'id', title:'ID', fixed: 'left'}
                    ,{field:'name', title:'商品名'}
                    ,{field:'subtitle', title:'子标题'}
                    ,{field:'categoryId', title:'分类'}
                    ,{field:'mainImage', title:'封面',templet: '#imageTemplet'}
                    ,{field:'detail', title:'商品内容',escape:false}
                    ,{field:'price', title:'价格'}
                    ,{field:'stock', title:'库存'}
                    ,{field:'status', title:'状态',templet: '#statusTemplet'}
                    ,{field:'zone', title:'所属专区',templet: '#zoneTemplet'}
                    ,{field:'gmtCreate', title:'创建时间',templet: "<div>{{layui.util.toDateString(d.gmtCreate, 'yyyy-MM-dd HH:mm:ss')}}</div>"}
                    ,{field:'gmtModified', title:'修改时间',templet: "<div>{{layui.util.toDateString(d.gmtModified, 'yyyy-MM-dd HH:mm:ss')}}</div>"}
                    ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
                ]
            ]
            ,page: true
            ,id: 'tableId'
        });

        //监听状态操作
        form.on('switch(statusLayFilter)', function(obj){

            var status = obj.elem.checked == true ? 1 : 0;
            $.post(
                [[${#request.getContextPath()}]]+'/product/changeStatus',
                {'id':this.value, 'status': status},
                function(result) {
                    if (result.code == 0) {
                        mylayer.okMsg(result.msg);
                    }else{
                        mylayer.errorMsg(result.msg);
                    }
                },
                'json'
            );
        });

        //头工具栏事件
        table.on('toolbar(test)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);
            switch(obj.event){
                case 'deleteAll':
                    var data = checkStatus.data;
                    var ids = new Array();
                    $(data).each(function() {
                        ids.push(this.id)
                    });
                    //[2,4]
                    ids = ids.join(',');// '2,4'
                    layer.confirm('真的删除行么', function(index){
                        $.post(
                            [[${#request.getContextPath()}]]+'/product/deleteAll',
                            {'ids': ids},
                            function(result) {
                                if (result.code == 0) {
                                    mylayer.okMsg(result.msg);
                                    //删除之后重新刷新这个表格
                                    table.reload('tableId');
                                }
                            },
                            'json'
                        );
                    });
                    break;
                case 'add':
                    layer.open({
                        type: 2,
                        title: '添加商品',
                        area: ['80%', '100%'],
                        content: [[${#request.getContextPath()}]]+'/product/getProductAddPage'
                    });
                    break;
                case 'isAll':
                    layer.msg(checkStatus.isAll ? '全选': '未全选');
                    break;

                //自定义头工具栏右侧图标 - 提示
                case 'LAYTABLE_TIPS':
                    layer.alert('这是工具栏右侧自定义的一个图标按钮');
                    break;
            };
        });

        //监听行工具事件
        table.on('tool(test)', function(obj){
            //{id: 2, name: 'zhansgan', password: '23', age: 0, gender: null}
            var data = obj.data;
            console.log(obj)
            if(obj.event === 'del'){
                layer.confirm('真的删除行么', function(index){
                    $.post(
                        [[${#request.getContextPath()}]]+'/product/deleteById',
                        {'id': data.id},
                        function(result) {
                            if (result.code == 0) {
                                mylayer.okMsg(result.msg);
                                //删除之后重新刷新这个表格
                                table.reload('tableId');
                            }
                        },
                        'json'
                    );
                });
            } else if(obj.event === 'edit'){
                layer.open({
                    type: 2,
                    area: ['80%', '100%'],
                    content: [[${#request.getContextPath()}]]+'/product/getProductUpdatePage?id=' + data.id
                });
            }
        });

        var $ = layui.$, active = {
            reload: function(){
                //执行重载
                table.reload('tableId', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    ,where: {
                        name: $('#nameId').val(),
                        zone: $('#zone_id').val()
                    }
                });
            }
        };

        $('.demoTable .layui-btn').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });


    });

    $.post(
        [[${#request.getContextPath()}]]+'/category/selectAllTop',
        function (result) {
            //console.log(result);
            $(result).each(function () {
                $('#topCategoryMenu').append('<li style="text-align:center" lay-options="{topId:\''+ this.id+'\'}">'+this.name+'</li>');
            });
        },
        'json'
    );
    layui.use('dropdown', function(){
        var dropdown1 = layui.dropdown;
        var dropdown2 = layui.dropdown;
        dropdown1.on('click(topCategoryMenu)', function(options){
            var topId=options.topId;
            $('#secCategoryMenu').empty();
            $('#secCategoryMenu').append('<li style="text-align:center;font-size: small" lay-options="{categoryId:\'\'}">全部分类</li>');
            if(topId==null||topId==''){
                return;
            }
            $.post(
                [[${#request.getContextPath()}]]+'/category/selectAllSec',
                {'topId': topId},
                function (jsonObj) {
                    $(jsonObj).each(function () {
                        $('#secCategoryMenu').append('<li style="text-align:center" lay-options="{categoryId:\''+ this.id+'\'}">'+this.name+'</li>');
                    });
                },
                'json'
            );
        });
        dropdown2.on('click(secCategoryMenu)', function(options){
            var categoryId=options.categoryId;
            table.reload('tableId', {
                page: {
                    curr: 1 //重新从第 1 页开始
                }
                ,where: {
                    name: $('#nameId').val(),
                    zone: $('#zone_id').val(),
                    categoryId: categoryId
                }
            });

        });


    });
</script>
</body>
</html>